<template>
<div>
    <el-button type="primary" style="width:200px; margin-top:50px" @click="dialogFormVisible = true">Change Info</el-button>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="MY EMAIL" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="MY PHONE" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="MY CITY" :label-width="formLabelWidth">
                <el-input v-model="form.city" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="MY ADDR1" :label-width="formLabelWidth">
                <el-input v-model="form.addr1" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="MY ADDR2" :label-width="formLabelWidth">
                <el-input v-model="form.addr2" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeInfo">确 定</el-button>
            </div>
    </el-dialog>
</div>
    
</template>

<script>
import getUserInfo from '@/common/common'
export default {
    name: 'changeInfoDialog',
    props:{
        form: {
            type: Object,
            default (){ return {} }
        },

    },
    data() {
        return{ 
            dialogFormVisible: false,
            formLabelWidth: '120px',
        }
    },
    methods:{
        changeInfo(){
            this.dialogFormVisible = false;
            this.$Axios({
                method: 'post',
                url: '/account/accounts',
                data: this.form
            }).then(res=>{
                this.$message.success(res.data.msg);
                getUserInfo();
            }).catch(error=>{
                this.$message.error("其他服务器错误"+error);
            })
        }
    }
}
</script>